<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" th:href="@{/css/index/style.css}"/>
  <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
  <link rel="stylesheet" th:href="@{/css/pagination.css}" type="text/css">
  <style>
    .imgtag{
      width: 13px;
    }
    div.list-item:first-child{
      margin-top: 30px;
    }
    .table th, .table td{
      font-size: 16px;
    }

  </style>
</head>
<body>
<div class="d-container flex">
  <!-- 上半部分布局 -->
  <div class="container-t flex">
    <!-- 项目总数模块 -->
    <div class="common-item item_01">
      <div class="item-title flex">
        <span>项目总数</span>
      </div>
      <div class="item-content flex">
        <div class="content-box flex">
          <img src="img/project_bg.png" alt="">
          <p class="p-sum">
            <!-- 项目总个数 -->
            <span th:text="${p_count}">60</span>
            个
          </p>
          <p>项目统计</p>
        </div>
      </div>
    </div>
    <!-- 当前红灯模块 -->
    <div class="common-item item_02">
      <div class="item-title flex">
        <span>当前红灯</span>
        <!-- 更多按钮 -->
        <a >more+</a>
      </div>
      <div class="item-content echarts-wrap">
        <!-- 红灯数据饼图 -->
        <div id="echarts-red" style="width: 100%;height: 100%;"></div>
      </div>
      <div class="light flex">
        <img src="img/red.png" alt="">
        <p>红灯总数
          <!-- 红灯总数 -->
          <span th:text="${red_count}" >20</span>
          个
        </p>
      </div>
    </div>
    <div class="common-item item_03">
      <div class="item-title flex">
        <span>当前黄灯</span>
        <!-- 更多按钮 -->
        <a>more+</a>
      </div>
      <div class="item-content echarts-wrap">
        <!-- 黄灯数据饼图 -->
        <div id="echarts-yellow" style="width: 100%;height: 100%;"></div>
      </div>
      <div class="light flex">
        <img src="img/yellow.png" alt="">
        <p>黄灯总数
          <!-- 黄灯总数 -->
          <span th:text="${yel_count}">20</span>
          个
        </p>
      </div>
    </div>
    <div class="common-item item_04">
      <div class="item-title flex">
        <span>亮灯数据</span>
        <!-- 更多按钮 -->
        <a>more+</a>
      </div>
      <div class="item-content echarts-wrap">
        <!-- 红灯数据柱图 -->
        <div id="echarts-bar" style="width: 100%;height: 100%;"></div>
      </div>
    </div>
  </div>
  <!-- 下半部分布局 -->
  <div class="container-b flex">
    <div class="common-item item_01">
      <div class="item-title flex">
        <span>我的警示单</span>
        <!-- 更多按钮 -->
        <a  style="cursor: pointer; z-index: 999;" class="edit"  href="#" onclick="projectmore()">more+</a>
      </div>
      <div class="line" style="width: 100%; border: 0.5px solid #eee;margin-top: 35px;"></div>
      <div class="item-content" style="margin-top: -50px;">
        <div class="table-box">
          <div class="box">

            <div class="content">


              <!--添加按钮及bootstrap的模态框-->

              <!--表格列表-->
              <table id="tb" class="table">
                <thead>
                <tr>
                  <th>亮灯状态</th>
                  <th>项目名称</th>
                  <th>步骤名称</th>
                  <th>负责人</th>
                  <th>到期时间</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody id="show_tbody">
                </tbody>
              </table>
              <div style="    display: flex;justify-content: center;">
                <div id="pagination" class="pageDiv"></div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <div class="common-item item_02">
      <div class="item-title flex">
        <span>通知公告</span>
        <!-- 更多按钮 -->
        <a>more+</a>
      </div>
      <div class="item-content">
        <!-- 通知公告list -->
        <div class="notice-list">

          <!-- 通知公告list item-->
          <div th:class="${i.count} == 1 ? 'list-item active' : 'list-item' " th:each="sysNotice,i : ${sys_notices} ">
            <div class="item-t flex" th:onclick="preview([[${sysNotice.lkNoticeId}]] , [[${sysNotice.isRead}]])">
              <!-- 项目名称 -->
              <div class="p-name" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" th:text="${sysNotice.lightType} == '1'? ${sysNotice.name} + '事项红灯警示单': ${sysNotice.name}+'事项黄灯警示单'"></div>
              <div class="p-time" th:style="${i.count} == 1 ? 'display: none;' : ''" th:text="${#dates.format(sysNotice.createTime, 'yyyy-MM-dd HH:mm')}"></div>
            </div>
            <!-- 其他信息 -->
            <div class="p-info" th:style="${i.count} == 1 ? 'display: block;' : ''">
              <p class="flex">
                <span>负责单位：</span>
                <span th:text="${sysNotice.lkMatterProject.mainOrgname}"></span>
              </p>
              <p class="flex">
                <span>发起时间：</span>
                <span th:text="${#dates.format(sysNotice.lkMatterProject.createTime, 'yyyy-MM-dd')}"></span>
              </p>
              <p class="flex">
                <span>计划完成时间：</span>
                <span th:text="${sysNotice.planningTime}"></span>
              </p>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</div>
<!-- 页脚 -->
<!--<div class="foot">-->
<!--<p>思创数码科技公司    版权所有</p>-->
<!--</div>-->
<div class="foot">
  <p>思创数码科技公司    版权所有</p>
</div>
<th:block th:include="include :: footer" />

<script src="/js/echarts.min.js"></script>
<script type="text/javascript" th:src="@{/jade/js/pagination.min.js}"></script>
<script th:inline="javascript">
  var total_count = [[${total_count}]]; // 总灯数
  var red_count = [[${red_count}]];
  var yel_count = [[${yel_count}]];
  $(function(){
    // 红灯
    var red={
      id:'echarts-red',//绑定dom id
      title:'红',
      color:'#ed0000',//颜色
      val:red_count,//当前灯数
      totleVal:total_count//总灯数
    }
    var yellow={
      id:'echarts-yellow',//绑定dom id
      title:'黄',
      color:'#ffb400',//颜色
      val:yel_count,//当前灯数
      totleVal:total_count//总灯数
    }
    createDoughnut(red);//红灯饼图
    createDoughnut(yellow);//黄灯饼图
    createBar();//红灯数据柱图
    noticeListAcyive();//通知公告交互
  })
  //通知公告交互方法
  function noticeListAcyive(){
    $('.notice-list .list-item').hover(function(){
      var that=$(this);
      that.addClass('active').siblings().removeClass('active');
      that.find('.p-time').hide()
      that.siblings().find('.p-time').show();
      that.find('.p-info').show()
      that.siblings().find('.p-info').hide();
    })
  }
  // 灯数量饼图方法
  function createDoughnut(type){
    var dom = document.getElementById(type.id);
    var myChart = echarts.init(dom);
    var value = type.val;
    option = {
      title: {
        text: '{a|' + value + '}{c|\n当前'+ type.title +'灯\n统计数量}',
        x: 'center',
        y: '30%',
        textStyle: {
          rich: {
            a: {
              fontSize: fontSize(.6),
              color: type.color,
              fontFamily:'Impact'
            },

            c: {
              fontSize: fontSize(.16),
              color: '#333',
              lineHeight:14,
            }
          }
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['65%', '40%'],
          center: ['50%', '47%'],
          silent: true,
          clockwise: true,
          startAngle: 90,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: "center",

            }
          },
          data: [{
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: type.color,
              }
            }
          },
            {
              value: type.totleVal - value,
              name: "",
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "#ddd"
                }
              }
            }
          ]
        },
        {
          name: "",
          type: "gauge",
          radius: "70%",
          center: ['50%', '47%'],
          startAngle: 0,
          endAngle: 359.9,
          splitNumber: 8,
          hoverAnimation: true,
          axisTick: {
            show: false
          },
          splitLine: {
            length: 60,
            lineStyle: {
              width: 3,
              color: "#fff"
            }
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          detail: {
            show: false
          },
          data: [{
            value: 0,
            name: ""
          }]
        },

      ]
    };
    myChart.setOption(option, true);
  }

  function createBar(){
    var dateArr = [],red_data=[],yel_data = [];
    $.ajax({
      type: "GET",
      url: "/linkong/matterProject/setectHalfYearMatterCount",
      data: '',
      cache: false,
      contentType: false,
      processData: false,
      async: false,
      success: function(result) {
        result.result.forEach(function(item,index){
          dateArr.push(item.dateStr);
          // dateValue.push(item.dateTotalCount);
          red_data.push(item.redLightCount);
          yel_data.push(item.yelLightCount);
        })
      },
      error: function(error) {
        $.modal.alertWarning("获取数据失败。");
      }
    });

    var dom = document.getElementById('echarts-bar');
    var myChart = echarts.init(dom);
    option = {
      color: ['#ed0000','#ffb400'],
      tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        data: ['红灯数', '黄灯数'],


      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis : [
        {
          type : 'category',
          // data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data : dateArr,

        }
      ],
      yAxis : [
        {
          type : 'value',
          name:'',
        },

      ],
      series : [

        {
          name: '红灯数',
          type: 'bar',
          data: red_data
        },
        {
          name: '黄灯数',
          type: 'bar',
          data: yel_data
        },
      ]
    };
    myChart.setOption(option, true);
  }
  // echarts设置字体大小方法
  function fontSize(res){
    var docEl = document.documentElement,
            clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
    if (!clientWidth) return;
    var fontSize = 100 * (clientWidth / 1920);
    return res*fontSize;
  }
  changepage(1);
  function changepage(currPage) {
    if (currPage == null || currPage == "" || currPage == 0) {
      currPage = 1;
    }
    var str = "";
    $.ajax({
      type: "POST",
      url: "/linkong/matterProject/indexList",
      data: {pageNum:currPage},
      cache: false,
      async: false,
      success: function(result) {
        $.each(result.rows, function (i, value) {
          var strdate = value.expectedDate == null ?"":value.expectedDate.substr(0,10);
          var lightType = value.light ;
          var imgtag ="";
          var namestr = value.name ;
          var mainOrgname =  value.mainOrgname==null?"": value.mainOrgname;
          if (lightType == "1") {
            imgtag = '<img  class="imgtag" src="img/light_02.png" alt="">';
          } else if (lightType == "2") {
            imgtag = '<img  class="imgtag" src="img/light_03.png" alt="">';
          }
          if(value.name == null && value.projectId == null){
            namestr = '未开始';
          }else if(value.name == null && value.projectId != null){
            namestr = '已结束';
          }
          str += '<tr>'
                  + '<td>' + imgtag + '</td>'
                  + '<td>' + value.proName + '</td>'
                  + '<td>' + namestr + '</td>'
                  + '<td>' + mainOrgname+ '</td>'
                  + '<td>' + strdate + '</td>'
                  + '<td>' ;
          if(namestr == '未开始'){
            str += '<a href="javascript:void(0)" style="color: grey;cursor: default" class="edit">立即查看</a></td>';
          }else{
            str +=  '<a href="#" onclick="see_btn('+ value.projectId + ' )" class="edit">立即查看</a></td>';
          }
          str += '<tr>';
        })
        $("#show_tbody").html(str);
        if (currPage > Math.ceil(result.total / 10)) {
          currPage = Math.ceil(result.total / 10);
        }
        var totalNum = 0;
        if (result.total <= 0 || result == null) {
          totalNum = 0;
        }else{
          totalNum = Math.ceil(result.total);
        }
        paging(currPage,Math.ceil(result.total / 10),totalNum);
      }
    });
    //分页插件
    function paging(pageNo,totalPage,totalNum){
      $("#pagination").whjPaging({
        css: 'css-2',
        totalNum: totalNum,
        totalPage: totalPage,
        callBack: function (currPage, pageSize) {
          changepage(currPage);
        }
      });
      /* 参数2：当前页面， 参数3：总页数， 参数4：总条数*/
      $("#pagination").whjPaging("setPage", pageNo, totalPage, totalNum);
    }
  }


  function see_btn(proId){
    $.modal.openTab("项目信息" , "/toPrejectDetail?proId=" + proId);
  }

  /** 项目more */
  function projectmore(){
    $.modal.openTab("项目警示信息" , "/linkong/log/projectmore");
  }


  function preview(id, isRead) {
    var url = '/linkong/notice/preview2/' + id;
    var options2 = {
      title: "预览",
      url: url,
      btn: 'hidden'
    };
    $.modal.openOptions(options2);
  }

</script>
</body>
</html>
